<template>
	<view class="content">
		<view class="search">
			<view class="searcht">
				<image class="searchico" src="../../static/images/search_icon.png"></image>
				<view class="input">
					<input v-model="inputvalue" type="text" placeholder="书名 / 作者 / ISBN " class="text" focus @confirm="search()" @input="showcat()"/>			
				</view>				
			</view>
			<image @click="scan()" class="saomiao" src="../../static/images/ic_scan.png"></image>
		</view>
		<view class="cat" v-show="showCatname">
			<text class="cattitle">图书分类</text>
			<view class="catitem">				
				<view class="catname" v-for="category in categorys" :key="category.id">
					<navigator class="" :url="'./category?catid=' + category.cat_id + '&catname=' + category.cat_name">
						<text >{{category.cat_name}}</text>
					</navigator>
				</view>				
			</view>
		</view>
		<view  v-if="isSearch">
			<view class="tab">
				<view class="tabItem" :class="{'active' : 0 == current}" @click="clickTab(0)">
					<text :class="{'borderline' : 0 == current}">书库</text>
				</view>
				<view class="tabItem" :class="{'active' : 1 == current}" @click="clickTab(1)">
					<text :class="{'borderline' : 1 == current}">阅邻</text>
				</view>
				<view class="tabItem" :class="{'active' : 2 == current}" @click="clickTab(2)">
					<text :class="{'borderline' : 2 == current}">用户</text>
				</view>
			</view>
			<view class="itemcar" v-show="current == 0">
				<!-- 书库 -->
				<view v-for="(booklist,index) in booklists" :key="index">
					<navigator class="item" :url="'./bookinfo?bookid=' + booklist.book_id">
						<image class="fengmian" :src="'https://www.yedushu.cn/' + booklist.bimg"></image>
						<view class="text-area">
							<text class="bookname" selectable="true" user-select="true">{{booklist.book_name}}</text>
							<text class="other" selectable="true" user-select="true">{{booklist.zuozhe}} | {{booklist.chubanshe}} </text>
						</view>
					</navigator>
				</view>
				<view v-if="isLoading" class="isload">加载更多...</view>
				<view v-else class="isend">~~ 我是有底线的 ~~</view>
			</view>
			<view class="itemcar" v-show="current == 2">
				<!-- 用户 -->
				<navigator :url="'../userhome/userhome?uid=' + userlist.uid + '&username=' + userlist.user_name"  class="userlist" v-for="(userlist,index) in userlists" :key="index">
					<image v-if="userlist.avatar_file == null" class="touxiang" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
					<image v-else class="touxiang" :src="'https://www.yedushu.cn/' + userlist.avatar_file"></image>
					<view class="uinfo">
						<text class="username">{{userlist.user_name}}</text>
						<text v-if="userlist.attrib == null" class="qianming">此人没有添加个性签名</text>
						<text v-else class="qianming">{{userlist.attrib.signature}}</text>
					</view>
				</navigator>
				<view v-if="isLoading" class="isload">加载更多...</view>
				<view v-else class="isend">~~ 我是有底线的 ~~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, //当前选项卡
				categorys: [], //分类列表
				inputvalue: '',
				booklists: [], // 书库列表
				userlists: [], // 会员列表
				booklist_current_page: 1,
				userlist_current_page: 1,
				isLoading: false,				
				isSearch: false,
				showCatname: true //是否显示图书分类
			}
		},
		onLoad() {
			this.isLoading = true;
			this.getcategory(); // 书籍分类列表
		},
		onPullDownRefresh() {
			// 下拉刷新			
			if(this.current == 0)
			{
				// 清空数据
				this.booklists = [];
				this.booklist_current_page = 1;
				// 获得当前页面
				this.booklist_current_page = booklist_current_page + 1;
				// 搜索的书籍
				this.getbookslist();
			}
			if(this.current == 1)
			{
				// 搜索的出售书籍
			}
			if(this.current == 2)
			{
				// 清空数据
				this.userlists = [];
				this.userlist_current_page = 1;
				// 获得当前页面
				this.userlist_current_page = this.userlist_current_page + 1;
				// 搜索的用户
				this.getuserlist();
			}
		},
		onReachBottom() {
			// 上拉刷新			
			if(this.current == 0)
			{
				// 获得当前页面
				this.booklist_current_page = this.booklist_current_page + 1;
				// 搜索的书籍
				this.getbookslist();
			}
			if(this.current == 1)
			{
				// 搜索的出售书籍
			}
			if(this.current == 2)
			{
				// 获得当前页面
				this.userlist_current_page = this.userlist_current_page + 1;
				// 搜索的用户
				this.getuserlist();
			}
		},
		methods: {
			search() {
				this.showCatname = false;
				this.isSearch = true;
				// 每次搜索前先清空搜索内容，为重新搜索做准备
				this.booklists = [];
				this.userlists = [];
				// 每次搜索前先初始化页数到第一页
				this.booklist_current_page = 1;
				this.userlist_current_page = 1;
				// 搜索图书
				if(this.isSearch)
				{
					this.getbookslist(); // 搜出的书籍列表					
					this.getuserlist(); // 搜出的用户列表
				}
			},
			getcategory() {
				//分类列表
				uni.request({
				    url: 'https://www.yedushu.cn/api/category',
				    success: (res) => {
				        // console.log(JSON.stringify(res.data));
						this.categorys = res.data;
				    }
				});
			},
			showcat() {				
				if(this.inputvalue.trim() == ''){
					// 显示图书分类名字
					this.showCatname = true;
					// 隐藏搜索出的内容
					this.isSearch = false;
				}
			},
			clickTab(cur){
				// tab切换
				this.current = cur;	
			},
			getbookslist() {
				// 搜索图书
				var url = 'https://www.yedushu.cn/api/searchbooks';
				uni.request({
				    url: url, 
					data: {
						'search_text': this.inputvalue,
						'page': this.booklist_current_page
					},
				    success: (res) => {
				        // console.log(res.data);
						if(res.data.last_page > this.booklist_current_page)
						{
							this.isLoading = true;
						}
						// 当前以后数据连接新获取的数据
						this.booklists = this.booklists.concat(res.data.data);
						// 停止页面刷新动画
						uni.stopPullDownRefresh();
				    }
				});	
			},
			getuserlist() {
				// 搜索会员
				var url = 'https://www.yedushu.cn/api/searchuser';
				uni.request({
				    url: url, 
					data: {
						'search_text': this.inputvalue,
						'page': this.userlist_current_page
					},
				    success: (res) => {
				        // console.log(JSON.stringify(res.data));
						if(res.data.last_page > this.userlist_current_page)
						{
							this.isLoading = true;
						}
						// 当前以后数据连接新获取的数据
						this.userlists = this.userlists.concat(res.data.data);
						// 停止页面刷新动画
						uni.stopPullDownRefresh();
				    }
				});	
			},
			scan() {
				//  跳转到二维码扫描页面
				uni.navigateTo({
				    url: '../scancode/scancode'
				});
				
				// 允许从相机和相册扫码
				// uni.scanCode({
				// 	scanType: ['qrCode','barCode'],
				//     success: function (res) {
				//         console.log('条码类型：' + res.scanType);
				//         console.log('条码内容：' + res.result);
				//     }
				// });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px 10px;
		padding: 5px 10px;
		border: 1px solid #fafafa;
		background-color: #f4f4f4;
		left: 0;		
		right: 0;
		position: fixed;
		border-radius: 5px;		
		z-index: 10;
	}
	.search .searcht {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex:1;
	}
	.search .searchico {
		padding: 0 5px 0 0;
		width: 28px; 
		height: 28px;
	}
	.search .saomiao {
		padding: 0 0 0 10px;
		width: 27px;
		height: 27px;
	}
	.search .input {
		flex:1 ;
		line-height: 28px;
	}
	.search .text {
		font-size: 15px;
		color: #666;
	}
	.tab{		
	    width: 100%;
		padding: 60px 0 0 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		border-bottom: 1px solid #f3f3f3;
		position: fixed;
		z-index: 1;
		background-color: #FFFFFF;
	}
	.tabItem{
	    width: 100%;
	    height: 25px;
	    line-height: 25px;
	    font-size: 15px;
	    text-align: center;
	    color: #666666;
	}
	.active{
	    color: #000000;
	}
	.itemcar {
		padding: 90px 10px 40px 10px;
	}
	.borderline {
		border-bottom: 2px solid #808080;
	}	
	.cat {
		padding: 60px 10px 10px 10px;
	}
	.cat .cattitle {
		font-size: 16px;
	}
	.cat .catitem {
		padding: 10px 0;
	}
	.cat .catname {
		background-color: #F4F4F4;
		padding: 5px 5px;
		border-radius: 5px;
		font-size: 15px;
		float: left;
		margin: 6px 10px;
	}
	.item {
		display: flex;
		padding: 15px 0px;
		border-bottom: 1px dashed #E8E8E8;
	}
	.fengmian {
		width: 80px;
		height: 108px;
	}
	.text-area {
		flex: 2;
		display: flex;
		flex-direction: column;
		padding-left: 8px;
	}
	.bookname {
		font-size: 16px;
		color: #337ab7;
	}
	.other {
		font-size: 14px;
	}
	.userlist {
		display: flex;
		flex-direction: row;
		padding: 15px 0px;
		border-bottom: 1px dashed #E8E8E8;
	}
	.uinfo {
		display: flex;
		flex-direction: column;
		padding-left: 10px;
		justify-content: center;
	}
	.touxiang {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.username {
		font-size: 16px;
		padding-bottom: 5px;
	}
	.qianming {
		font-size: 14px;
		overflow: hidden;/*超出部分隐藏*/
		white-space: nowrap;/*不换行*/
		text-overflow:ellipsis;/*超出部分文字以...显示*/
	}
	.isload {
		font-size: 14px;
		padding: 20px 0px;
		text-align: center;
	}
	.isend {
		font-size: 14px;
		padding: 10px 10px;
		text-align: center;		
	}
</style>
